	@media screen and (min-width:1200px) {
		html {
			font-size: 20px;
		}
	}

	@media screen and (min-width:800px) and (max-width:1200px) {
		html {
			font-size: 16px;
		}
	}

	@media screen and (max-width:800px) {
		html {
			font-size: 12px;
		}
	}

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	div {
		width: 30rem;
		height: 4rem;
		margin: 2rem auto;
		padding-left: 3rem;
		line-height: 4rem;
		color: white;
		border-radius: 6px;
	}

	div:nth-child(1) {
		background-color: #F56C6C;
	}

	div:nth-child(2) {
		background-color: #67C23A;
	}

	div:nth-child(3) {
		background-color: #909399;
	}

	div:nth-child(4) {
		background-color: #E6A23C;
	}

	div:nth-child(5) {
		background-color: #F56C6C;
		opacity: .6;
	}

	div:nth-child(6) {
		background-color: #67C23A;
		opacity: .6;
	}

	div:nth-child(7) {
		background-color: #909399;
		opacity: .6;
	}

	div:nth-child(8) {
		background-color: #E6A23C;
		opacity: .6;
	}

	div>.icon {
		margin-right: 2rem;
		float: right;
		font-size: 1.5rem;
		cursor: pointer;
	}

	div>.icon:hover {
		color: black;
	}